<template>
  <SelectorPub/>
  <OrderContainer @sales="sales" @compRehen="compRehen" @pageView="pageView" @priceUp="priceUp" @priceDown="priceDown" @releaseTime="releaseTime"/>
  <!--  视频列表-->
  <VideoList :recommendList="recommendList" :bol="true"/>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import SelectorPub from "@/views/course/components/selector/index.vue";
import OrderContainer from "@/views/course/components/ordercontainer/index.vue";


export default defineComponent({
  name: "finishclass",
  components: {SelectorPub, OrderContainer},
});
</script>

<script setup lang="ts">

//初始化挂载时调用
import {onMounted, ref} from "vue";
import {reqRecommend} from "@/apis/source";

// algorithmSortValue 销量排序   statisticsBackup.viewCount 浏览量排序
// creatorBackup.level 价格由高到底  initExposureNum  价格由低到高   updateTime  发布时间排序
onMounted(()=> {
    getRecommendList()
})

//pageSize
const pageSize = ref<number>(10)
//pageNum
const pageNum = ref<number>(1)
//推荐列表
const recommendList = ref<any>(null)
//获取推荐列表资源
const getRecommendList = async ()=>{
  const res = await reqRecommend(pageSize.value,pageNum.value)
  recommendList.value = res.content
}

// 综合
const compRehen = async ()=>{
  await getRecommendList()
}

// 销量
const sales = (type:number)=>{
  recommendList.value.sort((a:any,b:any)=>{
    return a.algorithmSortValue/1 - b.algorithmSortValue/1
  })
}

// 浏览量
const pageView = ()=>{
  recommendList.value.sort((a:any,b:any)=>{
    return a.statisticsBackup.viewCount/1 - b.statisticsBackup.viewCount/1
  })
}

// 价格由高到低
const priceDown = ()=>{
  recommendList.value.sort((a:any,b:any)=>{
    return a.initExposureNum/1 - b.initExposureNum/1
  })
}

// 价格由低到高
const priceUp = async () =>{
  recommendList.value.sort((a:any,b:any)=>{
    return b.initExposureNum/1 - a.initExposureNum/1
  })
}

// 发布时间
const releaseTime =  ()=>{
  recommendList.value.sort((a:any,b:any)=>{
    return a.updateTime/1 - b.updateTime/1
  })
}

</script>

<style scoped lang="scss">
/*兴趣列表*/
  .hobbyList_card {
    margin-top: 25px;
    padding: 16px 10px;
    font-size: 14px;
    margin-bottom: 10px;
  }


.text {
  display: flex;
  flex-wrap: wrap;
  color: #b1b5c1;
}

.text_comtents {
  width: 100px;
  margin-bottom: 20px;
  color: #7D8090;
  display: flex;
  flex-wrap: wrap;
}

.text_comtents div {
  width: 100px;
  margin-bottom: 20px;
  cursor: pointer;
}

.show {
  text-align: center;
  color: red;
  font-size: 14px;
  margin: 0 auto;
}

/*综合排序*/
.works {
  display: flex;
  font-size: 14px;
  color: #7D8090;
}

.works div {
  margin-left: 25px;
  margin-right: 30px;
}

.works div:hover {
  color: #f93684;
  /*变成小手*/
  cursor: pointer;
}

.works img {
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
</style>
